<template>
  <div>
    <home-header></home-header>

    <div class="indexMain">
      <home-my-article
        :article="article"
        @change="loadData"
      ></home-my-article>
      <home-message
        :message="message"
        @change="loadDataMessage"
      ></home-message>
    </div>

    <home-footer></home-footer>
  </div>
</template>

<script>
  import HomeHeader from './components/HomeHeader'
  import HomeFooter from './components/HomeFooter'
  import HomeMyArticle from './components/HomeMyArticle'
  import HomeMessage from './components/HomeMessage'

    export default {
      name: "Home",
      components: {
        HomeHeader,
        HomeFooter,
        HomeMyArticle,
        HomeMessage
      },
      data:function(){
        return {
          article: [],
          message: []
        }
      },
      methods: {
        loadData: function(pageNum) {
          var that = this;
          this.$axios.post('/user/test.shtml', {
            pageNum: pageNum,
            pageSize: 4
          }).then(function (response) {
            var data = response.data.rows;
            that.article = data;
          }).catch(function (error) {
            console.log(error);
          });
        },
        loadDataMessage: function(pageNum) {
          var that = this;
          this.$axios.post('/user/test.shtml', {
            pageNum: pageNum,
            pageSize: 7
          }).then(function (response) {
            that.message = response.data.rows;
          }).catch(function (error) {
            console.log(error);
          });
        }
      },
      mounted: function() {
        var that = this;
        that.loadData(1);
        that.loadDataMessage(1);
      }
    }
</script>

<style>
  @import '../../assets/css/common.css';
  @import '../../assets/css/style.css';

</style>
